<template>
  <div class="course-section">
    <div :key="item.id" v-for="item in sectionList">
      <h2>{{ item.sectionName }}</h2>
      <p class="lesson" :key="data.id" @click="handleClick(data)" v-for="data in item.courseLessons">
        <span>{{ data.theme }}</span>
        <van-icon v-if="data.canPlay" name="play-circle" size="20"></van-icon>
        <van-icon v-else name="lock" size="20"></van-icon>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'courseSection',
  props: {
    sectionList: {
      type: [Object, Array],
      require: true
    }
  },
  methods: {
    handleClick (lessonInfo) {
      if (lessonInfo.canPlay) {
        this.$router.push({ name: 'video', params: { lessonId: lessonInfo.id } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.course-section {
  padding: 0 10px;
}
.lesson {
    display: flex;
    justify-content: space-between;
}
</style>
